<script lang="ts">
export default {
  name: "kanban-warehouse-bottomLeft"
};
</script>
<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import order from "/@/assets/kanban/order.png";

// import { queryCustReseInfo } from "@/api/ams/home";
// const customerData = ref<any>([]);
// const inWelding = ref();
// const inCnc = ref();
// // 初始化入库焊接饼图
// const initPutinWelding = () => {
//   var cust_Chart = echarts.init(inWelding.value);
//   var option = {
//     title: {
//       text: "焊接",
//       textStyle: {
//         fontWeight: "normal",
//         fontSize: "16px",
//         color: "#fff"
//       },
//       left: 7,
//       top: 10
//     },
//     // tooltip: {
//     //   trigger: "item"
//     // },
//     tooltip: {
//       trigger: "item",
//       formatter: "状态：{b} <br/>区域总数：{c}<br/>占比：{d}% " // 修改格式
//     },
//     legend: {
//       orient: "vertical",
//       left: 0,
//       top: "30%",
//       textStyle: {
//         color: "#fff"
//       }
//     },
//     series: [
//       {
//         name: "焊接",
//         type: "pie",
//         top: "20%",
//         left: "30%",
//         radius: ["50%", "70%"],
//         label: {
//           show: false
//           // normal: {
//           //   color: "#fff"
//           // }
//         },
//         labelLine: {
//           show: false
//         },
//         textStyle: { color: "#fff" },
//         avoidLabelOverlap: false, //是否启用防止标签重叠策略
//         color: ["#30c283", "#4091f7", "#fac858"],
//         data: [
//           { value: 100, name: "已完成" },
//           { value: 1048, name: "进行中" },
//           { value: 104, name: "待分配" }
//         ],
//         emphasis: {
//           itemStyle: {
//             shadowBlur: 10,
//             shadowOffsetX: 0,
//             shadowColor: "rgba(0, 0, 0, 0.5)"
//           }
//         }
//       }
//     ]
//   };
//   cust_Chart.resize();
//   option && cust_Chart.setOption(option);
//   window.addEventListener("resize", () => {
//     cust_Chart.resize();
//   });
// };
// // 初始化入库数控饼图
// const initPutinCNC = () => {
//   var cust_Chart = echarts.init(inCnc.value);
//   var option = {
//     title: {
//       text: "数控",
//       textStyle: {
//         fontWeight: "normal",
//         fontSize: "16px",
//         color: "#fff"
//       },
//       left: 7,
//       top: 10
//     },
//     // tooltip: {
//     //   trigger: "item"
//     // },
//     tooltip: {
//       trigger: "item",
//       formatter: "状态：{b} <br/>区域总数：{c}<br/>占比：{d}% " // 修改格式
//     },
//     legend: {
//       orient: "vertical",
//       right: 10,
//       top: "30%",
//       textStyle: {
//         color: "#fff"
//       }
//     },
//     series: [
//       {
//         name: "焊接",
//         type: "pie",
//         top: "20%",
//         right: "30%",
//         radius: ["50%", "70%"],
//         label: {
//           show: false
//           // normal: {
//           //   color: "#fff"
//           // }
//         },
//         labelLine: {
//           show: false
//         },
//         textStyle: { color: "#fff" },
//         avoidLabelOverlap: false, //是否启用防止标签重叠策略
//         color: ["#30c283", "#4091f7", "#fac858"],
//         data: [
//           { value: 1048, name: "已完成" },
//           { value: 80, name: "进行中" },
//           { value: 140, name: "待分配" }
//         ],
//         emphasis: {
//           itemStyle: {
//             shadowBlur: 10,
//             shadowOffsetX: 0,
//             shadowColor: "rgba(0, 0, 0, 0.5)"
//           }
//         }
//       }
//     ]
//   };
//   cust_Chart.resize();
//   option && cust_Chart.setOption(option);
//   window.addEventListener("resize", () => {
//     cust_Chart.resize();
//   });
// };
// const outWelding = ref();
// const outCnc = ref();
// // 初始化出库焊接饼图
// const initOutWelding = () => {
//   var cust_Chart = echarts.init(outWelding.value);
//   var option = {
//     title: {
//       text: "焊接",
//       textStyle: {
//         fontWeight: "normal",
//         fontSize: "16px",
//         color: "#fff"
//       },
//       left: 7,
//       top: 10
//     },
//     // tooltip: {
//     //   trigger: "item"
//     // },
//     tooltip: {
//       trigger: "item",
//       formatter: "状态：{b} <br/>区域总数：{c}<br/>占比：{d}% " // 修改格式
//     },
//     legend: {
//       orient: "vertical",
//       left: 0,
//       top: "30%",
//       textStyle: {
//         color: "#fff"
//       }
//     },
//     series: [
//       {
//         name: "焊接",
//         type: "pie",
//         top: "20%",
//         left: "30%",
//         radius: ["50%", "70%"],
//         label: {
//           show: false
//           // normal: {
//           //   color: "#fff"
//           // }
//         },
//         labelLine: {
//           show: false
//         },
//         textStyle: { color: "#fff" },
//         avoidLabelOverlap: false, //是否启用防止标签重叠策略
//         color: ["#30c283", "#4091f7", "#fac858"],
//         data: [
//           { value: 100, name: "已完成" },
//           { value: 1048, name: "进行中" },
//           { value: 104, name: "待分配" }
//         ],
//         emphasis: {
//           itemStyle: {
//             shadowBlur: 10,
//             shadowOffsetX: 0,
//             shadowColor: "rgba(0, 0, 0, 0.5)"
//           }
//         }
//       }
//     ]
//   };
//   cust_Chart.resize();
//   option && cust_Chart.setOption(option);
//   window.addEventListener("resize", () => {
//     cust_Chart.resize();
//   });
// };
// // 初始化入库数控饼图
// const initOutCNC = () => {
//   var cust_Chart = echarts.init(outCnc.value);
//   var option = {
//     title: {
//       text: "数控",
//       textStyle: {
//         fontWeight: "normal",
//         fontSize: "16px",
//         color: "#fff"
//       },
//       left: 7,
//       top: 10
//     },
//     // tooltip: {
//     //   trigger: "item"
//     // },
//     tooltip: {
//       trigger: "item",
//       formatter: "状态：{b} <br/>区域总数：{c}<br/>占比：{d}% " // 修改格式
//     },
//     legend: {
//       orient: "vertical",
//       right: 10,
//       top: "30%",
//       textStyle: {
//         color: "#fff"
//       }
//     },
//     series: [
//       {
//         name: "焊接",
//         type: "pie",
//         top: "20%",
//         right: "30%",
//         radius: ["50%", "70%"],
//         label: {
//           show: false
//           // normal: {
//           //   color: "#fff"
//           // }
//         },
//         labelLine: {
//           show: false
//         },
//         textStyle: { color: "#fff" },
//         avoidLabelOverlap: false, //是否启用防止标签重叠策略
//         color: ["#30c283", "#4091f7", "#fac858"],
//         data: [
//           { value: 1048, name: "已完成" },
//           { value: 80, name: "进行中" },
//           { value: 140, name: "待分配" }
//         ],
//         emphasis: {
//           itemStyle: {
//             shadowBlur: 10,
//             shadowOffsetX: 0,
//             shadowColor: "rgba(0, 0, 0, 0.5)"
//           }
//         }
//       }
//     ]
//   };
//   cust_Chart.resize();
//   option && cust_Chart.setOption(option);
//   window.addEventListener("resize", () => {
//     cust_Chart.resize();
//   });
// };
// onMounted(() => {
// initPutinWelding();
// initPutinCNC();
// initOutWelding();
// initOutCNC();
// });
const welding = ref();
const cnc = ref();
// 初始化入库任务饼图
const initWelding = () => {
  var cust_Chart = echarts.init(welding.value);
  var option = {
    title: {
      text: "入库任务",
      textStyle: {
        color: "rgba(254,254,254, 0.9)"
      },
      left: 7,
      top: 10
    },
    // tooltip: {
    //   trigger: "item"
    // },
    tooltip: {
      trigger: "item",
      formatter: "状态：{b} <br/>区域总数：{c}<br/>占比：{d}% " // 修改格式
    },
    legend: {
      // orient: "vertical",
      left: 10,
      top: 45,
      textStyle: {
        color: "#fff",
        fontSize: "0.09rem"
      }
    },
    series: [
      {
        name: "入库任务",
        type: "pie",
        radius: ["50%", "70%"],
        top: "20%",
        label: {
          show: false
          // normal: {
          //   color: "#fff"
          // }
        },
        labelLine: {
          show: false
        },
        textStyle: { color: "#fff" },
        avoidLabelOverlap: false, //是否启用防止标签重叠策略
        color: ["#30c283", "#4091f7", "#fac858"],
        data: [
          { value: 110, name: "已完成" },
          { value: 148, name: "进行中" },
          { value: 104, name: "待分配" }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
  cust_Chart.resize();
  option && cust_Chart.setOption(option);
  window.addEventListener("resize", () => {
    cust_Chart.resize();
  });
};
// 初始化出库任务饼图
const initCNC = () => {
  var cust_Chart = echarts.init(cnc.value);
  var option = {
    title: {
      text: "出库任务",
      textStyle: {
        color: "rgba(254,254,254, 0.9)"
      },
      left: 7,
      top: 10
    },
    // tooltip: {
    //   trigger: "item"
    // },
    tooltip: {
      trigger: "item",
      formatter: "状态：{b} <br/>区域总数：{c}<br/>占比：{d}% " // 修改格式
    },
    legend: {
      // orient: "vertical",
      left: 10,
      top: 45,
      textStyle: {
        color: "#fff",
        fontSize: "0.09rem"
      }
    },
    series: [
      {
        name: "出库任务",
        type: "pie",
        top: "20%",
        radius: ["50%", "70%"],
        label: {
          show: false
          // normal: {
          //   color: "#fff"
          // }
        },
        labelLine: {
          show: false
        },
        textStyle: { color: "#fff" },
        avoidLabelOverlap: false, //是否启用防止标签重叠策略
        color: ["#30c283", "#4091f7", "#fac858"],
        data: [
          { value: 148, name: "已完成" },
          { value: 800, name: "进行中" },
          { value: 640, name: "待分配" }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
  cust_Chart.resize();
  option && cust_Chart.setOption(option);
  window.addEventListener("resize", () => {
    cust_Chart.resize();
  });
};
onMounted(() => {
  initWelding();
  initCNC();
});
</script>
<template>
  <div class="box" style="margin-bottom: 0">
    <div class="tit01 title_img">
      <img :src="order" />
      <p>当日任务</p>
    </div>
    <div class="echartsWarehouse">
      <div style="float: left; width: 50%; height: 100%" ref="welding"></div>
      <div style="float: left; width: 50%; height: 100%" ref="cnc"></div>
    </div>
    <!-- <div class="" id="" style="height: calc(50% - 51px)">
      <p class="tit01">入库任务</p>
      <div style="float: left; width: 50%; height: 100%" ref="inWelding"></div>
      <div style="float: left; width: 50%; height: 100%" ref="inCnc"></div>
    </div>
    <div class="" id="" style="height: calc(50% - 51px)">
      <p class="tit02">出库任务</p>
      <div style="float: left; width: 50%; height: 100%" ref="outWelding"></div>
      <div style="float: left; width: 50%; height: 100%" ref="outCnc"></div>
    </div> -->
  </div>
</template>
